<template>
  <div class="container">
    <div class="tool-bar">
      <el-button type="primary" size="small">应用一</el-button>
      <el-button type="primary" size="small">应用二</el-button>
      <el-button type="primary" size="small">应用三</el-button>
    </div>
    <el-row class="margin-20" :gutter="20">
      <el-col :span="6">
        <div class="analyze">
          <div class="box">
            <i class="el-icon-circle-plus"></i>
          </div>
          <div class="text">
            <h3>800</h3>
            <p>新增用户</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="analyze">
          <div class="box">
            <i class="el-icon-circle-plus"></i>
          </div>
          <div class="text">
            <h3>800</h3>
            <p>累计点击</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="analyze">
          <div class="box">
            <i class="el-icon-circle-plus"></i>
          </div>
          <div class="text">
            <h3>800</h3>
            <p>新增问答</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="analyze">
          <div class="box">
            <i class="el-icon-circle-plus"></i>
          </div>
          <div class="text">
            <h3>800</h3>
            <p>分享统计</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="charts" ref="charts"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
export default {

  mounted () {
    let options = {
      title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.$nextTick(() => {
      let charts = echarts.init(this.$refs.charts)
      charts.setOption(options)
    })
  }
}

</script>

<style scoped lang="scss">
.margin-20 {
  margin: 20px 0;
}
.charts{
  height: 300px;
}
.analyze {
  display: flex;
  border: 1px solid $gray;
  border-radius: 5px;
  .box {
    background: $color-primary;
    color: $light;
    padding: 0 25px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }
  .text {
    flex: 1;
    text-align: center;
    padding: 20px;
  }
}
</style>
